<template>
  <header class="main-header">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1>一个后端菜鸟的漫漫成长路</h1>
        </div>
        <!-- 主导航菜单 -->
        <navigator v-show="true"></navigator>
      </div>
    </div>
  </header>
  <nav class="main-navigation">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="navbar-header">
                        <span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars"></i>
                        </span>
          </div>
          <div class="collapse navbar-collapse" id="main-menu">
            <ul class="menu">
              <li class="nav-current" role="presentation"><a href="/">首页</a></li>
              <li  role="presentation"><a href="/api" title="为了方便前端程序员调试而设计的开放API， 可跨域访问, 需要登录！">API</a></li>
              <li  role="presentation"><a href="http://www.oschina.net/" title="开源中国社区" target="_blank">开源社区</a></li>
              <li  role="presentation"><a href="http://www.jianshu.com/" title="Linux" target="_blank">Linux</a></li>
              <li  role="presentation"><a href="https://github.com/qibaoguang/Spring-Boot-Reference-Guide/blob/master/SUMMARY.md" title="Spring" target="_blank">Spring</a></li>
              <li  role="presentation"><a href="/other" title="其他" target="_blank">其他</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
  import navigator from './navigator.vue'

  export default {
    components: {
      navigator
    }
  }
</script>

<style scoped>
  @media screen and (max-width: 768px){
    .home-template .main-header{
      padding: 30px 0;
    }
    .main-header h1{
      font-size: 2em;
    }

    .main-navigation .menu li a{
      line-height: 1.6;
      padding: 5px 20px;
    }
  }
</style>
